<template>
  <el-card shadow="always">
    <el-table
      :data="students"
      style="width: 100%">
      <el-table-column
        label="学号"
        prop="sid"
        align="center"
        width="180"/>
      <el-table-column
        label="姓名"
        prop="sname"
        align="center"/>
      <el-table-column
        label="性别"
        prop="sex"
        align="center"/>

      <el-table-column
        label="住址"
        prop="addr"
        align="center"/>
      <el-table-column
        label="班级编号"
        prop="cid"
        align="center"/>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</template>

<script>
  import studentApi from '@/api/student'
  export default {
    data() {
      return {
        students: []
      }
    },
    created() {
      this.findStudents()
    },
    methods: {
      findStudents(){
        studentApi.getStudents().then(({data}) => {
          console.log("data:",data)
          this.students = data.list
        })
      },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

<style>
  .el-card{
    padding:10px;
    width: 98%;
    margin: 0 auto;
    margin-top: 10px;
  }
</style>
